/**
 * 
 * @authors 前端小灰狼
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 * 
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试，see you next week！
// ...




// 0.获取元素
const toDoInp = document.querySelector('form>input');
const doingBox = document.querySelector('.demo-box');
const sectionBox = document.querySelector('section');
const inputs = document.querySelectorAll('section>input')
const doneBox = document.querySelector('#donelist')
const ipBox = document.getElementById('ipv4');
const addrBox = document.getElementById('addr');
toDoInp.addEventListener('keydown', function(e){
    e = e || window.event;
    // 判断按下的是回车键
    if(e.keyCode == 13) {
        const text = this.value.trim();
        if(text === '') return;
        else{
            toDo();
            this.value = '';
        }
        
    }
  
});
// 把旧的代办渲染在页面上
for(let i = 0; i < window.localStorage.length; i++) {
    let key = window.localStorage.key(i);
    let oldValue = window.localStorage.getItem(key);
    const li2 = document.createElement('li');
    li2.innerHTML = `
        <input type="checkbox" />
        <p>${oldValue}</p>
        <a href="javascript:;">-</a> 
    `
    doingBox.appendChild(li2);
}

// 1.添加一条新的代办
function toDo() {
    const text = toDoInp.value;
    window.localStorage.setItem(text, text);
    const li  = document.createElement('li');
    // 新添加一条代办
    li.innerHTML = `
    <input type="checkbox" />
    <p>${text}</p>
    <a href="javascript:;">-</a> 
    `
    doingBox.appendChild(li);
    modifyCount();
}


// 2.改变代办，正在进行事项的位置
$("section").on("change", "input[type=checkbox]", function () {
    if ($(this).prop("checked")) {
        // console.log(1)
        $("#donelist").append($(this).parent());
        modifyCount();
    } else {
        // console.log(2)
        $("#todolist").append($(this).parent());
        modifyCount();
    }
});

// 3.实时编辑事项内容
$("#todolist").on("click", "p", function () {
    $(this).html("<input type='text' value='" + $(this).text() + "'>");
    var $i = $(this).children();
    $i.click(function (e) {
        e = e || event;
        e.stopPropagation();
    })
    $i.select();
    $i.blur(function (e) {
        this.outerHTML = this.value;
    })
})

//4.删除功能
$("section").on("click", "a", function () {
    $(this).parent().remove()
    var name = $(this).prev().html();
    localStorage.removeItem(name);
    modifyCount();
})
// 5.修改数量
function modifyCount() {
    var $count1 = $("#todolist").children().length;
    var $count2 = $("#donelist").children().length;
    $("#todocount").html($count1);
    $("#donecount").html($count2);
}
modifyCount();



// 6.处理跨域
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost/ks');
xhr.onload = function() {
    const res = xhr.responseText;
    ipBox.innerHTML = `${res.ip}`;
    addrBox.innerHTML = `${res.country} ${res.area}互联网数据交换中心`;
}
xhr.send();






